<template>
	<view>
		<view class="header">
			<image src="https://cskjz.baoliy168.com/public/static/img/alliance-header.png" mode="widthFix"></image>
		</view>
		<view class="list-main">
			<view class="list-title">
				活动列表
			</view>
			<view class="list-list" v-for="(item,index) in list">
				<view class="list-left">
					<image :src="$util.img(item.picture)" mode=""></image>
				</view>
				<view class="list-right">
					<view class="list-right-title">
						{{item.title}}
					</view>
					<!-- <view class="list-right-stag">
						<view class="stag">
							曝光率：510
						</view>
						<view class="stag">
							转发率：510
						</view>
						<view class="stag">
							成交量：510
						</view>
					</view> -->
					<view class="list-right-time">
						活动结束时间:{{item.endtime}}
					</view>
					<view class="list-right-money">
						<view class="list-price">
							&yen;{{item.price}}
						</view>
						<view class="list-price-old">
							&yen;{{item.original_price}}
						</view>
						<view class="list-buy" @click="goDetail(item.id)">
							马上抢 
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				list:[]
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			goDetail(id){
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url:"/otherpages/detail/detail?id="+id
					})
				} else {
					this.$refs.login.open('/otherpages/alliance/list');
					return;
				}
				
			},
			getData(){
				var that = this;
				var res = uni.getStorageSync('location');
				that.$api.sendRequest({
					url: '/alliance/api/index/lists',
					data: {
						latitude:res.latitude,
						longitude:res.longitude,
						page:that.page
					},
					success: res => {
						if(that.page==1){
							
							that.list = res.list;
						}else{
							that.list.push.apply(that.list,res.list);
						}
						if(res.list.length>0){
							that.page++;
						}
					}
				});
			}
		}
	}
</script>

<style>
	.header{
		width: 750rpx;
		height: 360rpx;
	}
	.header>image{
		width: 750rpx;
		/* height: 360rpx; */
	}
	.list-main{
		width: 690rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		top: -30rpx;
	}
	.list-title{
		height: 60rpx;
		width: 690rpx;
		line-height: 60rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
	}
	.list-list{
		width: 650rpx;
		margin: 20rpx 0;
		padding: 20rpx;
		box-shadow:  0 4px 10px rgba(0, 0, 0, .1);
		display: flex;
		border-radius: 10rpx;
	}
	.list-left>image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.list-right{
		margin-left: 20rpx;
	}
	.list-right-title{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		line-height: 60rpx;
	}
	.list-right-stag{
		display: flex;
	}
	.stag{
		flex: 1;
		color: #999999;
		line-height: 40rpx;
		font-size: 24rpx;
	}
	.list-right-time{
		color: #999999;
		line-height: 40rpx;
		font-size: 24rpx;
	}
	.list-right-money{
		display: flex;
		background-color: #FFEBEB;
		height: 60rpx;
		padding-left:20rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
	}
	.list-price{
		color: #FF5454;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 60rpx;
	}
	.list-price-old{
		font-size: 24rpx;
		color: #999999;
		text-decoration: line-through;
		line-height: 60rpx;
		margin-left: 20rpx;
		flex: 1;
	}
	.list-buy{
		background: linear-gradient(0deg,#fe4747 0%, #ffd008 100%);
		line-height: 60rpx;
		color: #ffffff;
		padding:0 20rpx 0 50rpx;
		border-radius: 100rpx 10rpx 10rpx 0;
	}
</style>
